<style>
.wall-list{
	width: 420px;
	/*height: 410px;*/
	padding: 10px 0px 10px 10px;
}

.wall-list h3{
    margin-bottom: 20px;
}

.wall-list #friend-list{
	height: 250px;
	overflow-y: scroll;
        border: 1px solid gray;
        margin-bottom: 10px;
}

.wall-list #friend-list table tr:hover{
	background-color: #E9F4FA;
}
.wall-list #friend-list td.name{
    color: #666666;
    font-size: 12px;
    font-weight: bold;
    padding-left: 10px;
    width: 100%;
}
.wall-list #friend-list td.checkbox{
    padding-left: 10px;
}
.wall-list #friend-list td.photo{
    padding-top: 4px;
}
.wall-list #friend-list td.photo img{
    width: 35px;
    height: 35px;
}
.wall-list #save-button{
	clear:both;
}

.wall-list #submit{
    float: left;
    margin-right: 10px;
}

.wall-list .form-label{
    float:left; 
}
.wall-list #list_name-wrapper, .wall-list #list_type-wrapper{
    margin-bottom: 10px;
}

.wall-list #list_type{
    margin-left: 38px;
}

.wall-list #list_name{
    margin-left: 10px;
}
</style>
<div class='wall-list'>
    <?php echo $this->form->render(); ?>
</div>
<script type="text/javascript">
//Auto select friends
if (document.getElementById('friend_array').value != ''){
    $$('.wall-list #friend-list table tr').each(function(el){
        el.setProperty('select','false');
        if ($('friend_array').get('value').search(el.get('uid')) != -1){
            el.getElement('input[type=checkbox]').set('checked', 'true');
            el.setProperty('select','true');
            el.setStyle('background-color','#E9F4FA');
        }
    });
}

$$('.wall-list #friend-list table tr').each(function(el){
	el.addEvent('click', function(){
		if (el.getProperty('select') == 'false'){
			el.getElement('input[type=checkbox]').set('checked', 'true');
                        el.setProperty('select','true');
                        el.setStyle('background-color','#E9F4FA');
		} else {
			el.getElement('input[type=checkbox]').set('checked', '');
                        el.setProperty('select','false');
                        el.setStyle('background-color','#FFFFFF');
		}
                
	});
});

$('submit').addEvent('click', function(e){
	var ids = new Array(); 
        var friends =document.getElementsByName("friend-row");
        for(i = 0; i < friends.length; i++){
            if (friends[i].getAttribute('select') == 'true'){
                ids.push(friends[i].getAttribute('uid'));
            }
            
        }
        document.getElementById('friend_array').value = ids.toString();
});
</script>